<template>
  <div class="login">
    <div class="wrap">
      <div class="form">
        <div class="title">登录征婚网</div>
        <el-form label-position="top" label-width="160px" :model="form">
          <el-form-item label="账号">
            <el-input v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
        </el-form>
        <div class="submit pointer" @click="login">立即登录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      form: { account: "", password: "" },
    };
  },
  mounted() {},
  methods: {
    login() {
      this.$post("user/login", this.form).then((res) => {
        localStorage.setItem("token", res.data.token);
        this.$router.push("/");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login {
  background: url("@/assets/login-bg.png") center center no-repeat;
  height: calc(100vh - 260px);
  display: flex;
  align-items: center;
  .wrap {
    display: flex;
    justify-content: flex-end;
  }
}
.form {
  background: #fff;
  width: 480px;
  padding: 40px;
  .title {
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 20px;
  }
  .submit {
    line-height: 48px;
    background: linear-gradient(-89deg, #ef3e91, #f4743c);
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    margin-top: 40px;
  }
}
:deep .el-form-item {
  margin-bottom: 10px;
}
:deep .el-form-item__label {
  line-height: 26px;
}
@media screen and (max-width: 768px) {
  .login {
    background: url("@/assets/login-bg.png") center center no-repeat;
    height: calc(100vh - 185px);
    display: flex;
    align-items: center;
    .wrap {
      display: flex;
      justify-content: center;
    }
  }
  .form {
    width: 90%;
    padding: 20px;
    .title {
      font-size: 20px;
    }
    .submit {
      line-height: 50px;
      font-size: 16px;
      margin-top: 20px;
    }
  }
}
</style>
